import React, { useEffect, useRef } from 'react';
import cx from 'classnames';
import observeNode from './observeNode';

import './index.less';

export default function FixedTop(props) {
    const holderRef = useRef();
    const fixedRef = useRef();
    useEffect(() => {
        const updateHeight = () => {
            if (fixedRef.current) {
                const height = fixedRef.current.clientHeight;
                holderRef.current.style.cssText += `;height: ${height}px;`;
            }
        };
        updateHeight();
        return observeNode(fixedRef.current, updateHeight);
    }, [props]);

    const { holderClassName, className } = props;

    const top = WPT.computedPosition(0);

    return (
        <div className="componentsFixedTop">
            <div className={cx('fixedTop', className)} style={{ top }} ref={fixedRef}>
                {props.children}
            </div>
            <div ref={holderRef} className={holderClassName} />
        </div>
    );
}

export function getFixedClass() {
    // 获取
    return `fixedTop${WPT.Util.uuid(10)}`;
}
